<template>
  <div>
    <h2>首页</h2>
    <el-row class="ul_box" :gutter="50">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="li" id="a1">
          <p>{{ list.orderCount }}</p>
          <p @click="p1_from"><i class="el-icon-user" ></i>用户总数</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="li" id="a2">
          <p>{{ list.productCount }}</p>
          <p @click="p2_tab"><i class="el-icon-user"></i>商品总数</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="li" id="a3">
          <p>{{ list.userCount }}</p>
          <p><i class="el-icon-user"></i>订单总数</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { USER } from "../request/http";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.userlist();
  },
  methods: {
    async userlist() {
      const { data: res } = await USER(`/statistic/base_count.do`);
      console.log(res.data);
      this.list = res.data;
    },
    //跳转 用户列表
    p1_from() {
      this.$router.push({ path: "/from" });
    },
    //跳转 商品列表
    p2_tab() {
      this.$router.push({ path: "/tab" });
    },
  },
};
</script>

<style lang="scss">
.ul_box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 0px;
  .li {
    width: 100%;
    height: 150px;
    background: lavender;

    p {
      // line-height: 60px;

      i {
        font-size: 20px;
      }
      &:nth-child(1) {
        font-size: 50px;
        text-align: center;
        color: white;
        font-weight: 700;
        padding-top: 30px;
      }
      &:nth-child(2) {
        color: white;
        font-weight: 900;
        text-align: center;
      }
    }
    &:hover {
      transform: scale(1.1);
      transition-duration: 1s;
      cursor: pointer;
      p {
        color: black;
      }
    }
  }
}
    #a1{
      background: orange;
    }
    #a2{
      background: orangered;
    }
    #a3{
      background: green;
    }
</style>